<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 800px;
        overflow: hidden;
    }

    .card-header {
        display: flex;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        background-color: #f8f8f8;
    }

    .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
        object-fit: cover;
    }

    .user-info {
        flex-grow: 1;
    }

    .username {
        font-size: 24px;
        font-weight: bold;
        margin: 0 0 5px 0;
        color: #333;
    }

    .badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .level {
        background-color: #e0e0e0;
        color: #333;
    }

    .online {
        background-color: #4caf50;
        color: white;
        margin-left: 10px;
    }

    .card-content {
        padding: 20px;
        display: flex;
    }

    .info-section {
        flex: 2;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }

    .info-item {
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 6px;
    }

    .info-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .rank-image-container {
        position: relative;
        width: 200px;
        height: auto;
    }

    .rank-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 180%;
        height: auto;
    }

    .rank-image-background {
        position: relative;
        width: 100%;
        height: auto;
    }

    .rank-badge {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ffd700;
        color: #333;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 20px;
    }

    .stat-item {
        background-color: #f0f0f0;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
    }

    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 14px;
        color: #666;
    }
</style>

<body>
    <div class="card">
        <div class="card-header">
            <img src="{{roleIcon}}" alt="用户头像" class="avatar">
            <div class="user-info">
                <h2 class="username">{{roleName}}</h2>
                <span class="badge level">等级 {{gameLevel}}</span>
                <span class="badge online">{{gameOnline === 1 ? '在线' : '离线'}}</span>
            </div>
        </div>
        <div class="card-content">
            <div class="info-section">
                <div class="info-grid">
                    <div class="info-item">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10.5a8.38 8.38 0 0 1-1.9.5 4.15 4.15 0 0 0 1.8-2.3 8.27 8.27 0 0 1-2.6 1 4.14 4.14 0 0 0-7.1 3.8 11.72 11.72 0 0 1-8.5-4.3 4.14 4.14 0 0 0 1.3 5.5 4.07 4.07 0 0 1-1.9-.5v.1a4.14 4.14 0 0 0 3.3 4 4.1 4.1 0 0 1-1.9.1 4.14 4.14 0 0 0 3.9 2.9 8.3 8.3 0 0 1-5.1 1.8 11.72 11.72 0 0 0 6.3 1.8c7.5 0 11.6-6.2 11.6-11.6v-.5a8.18 8.18 0 0 0 2-2.1z'/%3E%3C/svg%3E"
                            alt="IP归属地图标" class="info-icon">
                        <span>IP: {{IP}}</span>
                    </div>
                    <div class="info-item">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"
                            alt="奖杯图标" class="info-icon">
                        <span>段位：{{roleJobName}}</span>
                    </div>
                    <div class="info-item">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"
                            alt="地球图标" class="info-icon">
                        <span>分区：{{areaName}}</span>
                    </div>
                    <div class="info-item">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h.01'/%3E%3Cpath d='M7 20v-4'/%3E%3Cpath d='M12 20v-8'/%3E%3Cpath d='M17 20V8'/%3E%3Cpath d='M22 4v16'/%3E%3C/svg%3E"
                            alt="信号图标" class="info-icon">
                        <span>区服：{{roleText}}</span>
                    </div>
                </div>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-value">{{content_1}}</div>
                        <div class="stat-label">战斗力</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{content_2}}</div>
                        <div class="stat-label">MVP次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{content_3}}</div>
                        <div class="stat-label">总场次</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{content_4}}</div>
                        <div class="stat-label">英雄数量</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{content_5}}</div>
                        <div class="stat-label">胜率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{content_6}}</div>
                        <div class="stat-label">皮肤数量</div>
                    </div>
                </div>
            </div>
            <div class="rank-image-container">
                <img src="{{flagImg}}" alt="段位图片" class="rank-image-background">
                <img src="{{roleJobIcon}}" alt="段位图片" class="rank-image">
                <span class="rank-badge">{{roleJobName}}</span>
            </div>
        </div>
    </div>
</body>